<template>
  <div class="work-order-progress-container">
    <!-- 顶部青色横条 -->
    <div class="top-cyan-bar"></div>

    <!-- 主标题区域 -->
    <div class="main-header">
      <!-- 中央标题框 -->
      <div class="title-container">
        <div class="title-border">
          <h1 class="page-title">工单执行进度看板</h1>
        </div>
      </div>

      <!-- 日期时间显示 -->
      <div class="datetime-display">
        {{ currentDateTime }}
      </div>
    </div>

    <!-- 主要内容区域 - 表格样式 -->
    <div class="main-content">
      <div class="table-container" ref="tableWrap" @mouseenter="paused = true" @mouseleave="paused = false">
        <!-- 表格头部 -->
        <div class="table-header">
          <div class="header-cell" title="工单编号">工单编号</div>
          <div class="header-cell" title="产品编号">产品编号</div>
          <div class="header-cell" title="产品名称">产品名称</div>
          <div class="header-cell" title="产品规格">产品规格</div>
          <div class="header-cell" title="工序编号">工序编号</div>
          <div class="header-cell" title="工序名称">工序名称</div>
          <div class="header-cell" title="分配列表">分配列表</div>
          <div class="header-cell numeric" title="报工数配比">报工数配比</div>
          <div class="header-cell numeric" title="计划数">计划数</div>
          <div class="header-cell numeric" title="良品数">良品数</div>
          <div class="header-cell numeric" title="不良品数">不良品数</div>
        </div>

        <!-- 表格内容区域 -->
        <div class="table-body">
          <!-- 加载中 -->
          <div v-if="loading" class="empty-table">
            <div class="empty-message">加载中...</div>
          </div>

          <!-- 无数据 -->
          <div v-else-if="workItems.length === 0" class="empty-table">
            <div class="empty-message">暂无工单数据</div>
          </div>

          <!-- 有数据时渲染行 -->
          <div v-else class="table-rows">
            <div v-for="(item, index) in workItems" :key="index" class="table-row">
              <div class="body-cell" :title="item.WorkOrderNumber">{{ item.WorkOrderNumber }}</div>
              <div class="body-cell" :title="item.ProductCode">{{ item.ProductCode }}</div>
              <div class="body-cell" :title="item.ProductName">{{ item.ProductName }}</div>
              <div class="body-cell" :title="item.ProductSpec">{{ item.ProductSpec }}</div>
              <div class="body-cell" :title="item.ProcessNumber">{{ item.ProcessNumber }}</div>
              <div class="body-cell" :title="item.ProcessName">{{ item.ProcessName }}</div>
              <div class="body-cell" :title="item.AllocationList">{{ item.AllocationList }}</div>
              <div class="body-cell numeric" :title="String(item.ReportQuantityRatio)">{{ item.ReportQuantityRatio }}</div>
              <div class="body-cell numeric" :title="String(item.PlannedQuantity)">{{ item.PlannedQuantity }}</div>
              <div class="body-cell numeric" :title="String(item.GoodQuantity)">{{ item.GoodQuantity }}</div>
              <div class="body-cell numeric" :title="String(item.DefectiveQuantity)">{{ item.DefectiveQuantity }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { MES_XHY_ApiHost } from '@/utils/Interceptors'

// 当前日期时间
const currentDateTime = ref('')

// 页面数据
type WorkItem = {
  WorkOrderNumber: string
  ProductCode: string
  ProductName: string
  ProductSpec: string
  ProcessNumber: string
  ProcessName: string
  AllocationList: string
  ReportQuantityRatio: number
  PlannedQuantity: number
  GoodQuantity: number
  DefectiveQuantity: number
}

const workItems = ref<WorkItem[]>([])
const loading = ref<boolean>(false)
const tableWrap = ref<HTMLElement | null>(null)
const paused = ref(false)
let scrollTimer: number | null = null
let dataTimer: number | null = null

// 更新时间
let timeInterval: number | null = null

const updateDateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  
  currentDateTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 获取工单执行进度
const fetchWorkExecutionProgress = async () => {
  loading.value = true
  try {
    const response = await MES_XHY_ApiHost.get('/api/CompletionOrder/GetWorkExecutionProgress')
    const data = response.data

    if (Array.isArray(data)) {
      workItems.value = data
    } else if (data?.data && Array.isArray(data.data)) {
      workItems.value = data.data
    } else if (data?.Data && Array.isArray(data.Data)) {
      workItems.value = data.Data
    } else if (data?.result && Array.isArray(data.result)) {
      workItems.value = data.result
    } else {
      workItems.value = []
    }
    await nextTick()
    restartAutoScroll()
  } catch (error) {
    console.error('获取工单执行进度失败:', error)
    workItems.value = []
  } finally {
    loading.value = false
  }
}

function stepScroll(wrapper: HTMLElement, amount = 1) {
  const max = wrapper.scrollHeight - wrapper.clientHeight
  if (max <= 0) return
  if (wrapper.scrollTop >= max) {
    wrapper.scrollTop = 0
  } else {
    wrapper.scrollTop += amount
  }
}

function startAutoScroll() {
  if (scrollTimer) window.clearInterval(scrollTimer)
  if (tableWrap.value) {
    scrollTimer = window.setInterval(() => {
      if (!paused.value && tableWrap.value) stepScroll(tableWrap.value, 1)
    }, 35)
  }
}

function stopAutoScroll() {
  if (scrollTimer) window.clearInterval(scrollTimer)
}

function restartAutoScroll() {
  stopAutoScroll()
  startAutoScroll()
}

onMounted(() => {
  document.title = '工单执行进度看板 - MES系统'
  updateDateTime()
  // 每秒更新时间
  timeInterval = setInterval(updateDateTime, 1000)
  // 加载数据
  fetchWorkExecutionProgress()
  dataTimer = setInterval(fetchWorkExecutionProgress, 30000)
  nextTick().then(() => startAutoScroll())
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
  if (dataTimer) {
    clearInterval(dataTimer)
  }
  stopAutoScroll()
})
</script>

<style scoped>
.work-order-progress-container {
  min-height: 100vh;
  /* 与大屏页面一致的深色渐变背景 */
  background: radial-gradient(1200px 600px at 50% -100px, rgba(0, 194, 255, 0.12), transparent 70%), #081c2b;
  color: #d7efff;
  position: relative;
  /* 允许页面滚动 */
  overflow-x: hidden;
  overflow-y: auto;
}

/* 顶部青色横条 */
.top-cyan-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #00d4ff;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
  z-index: 10;
}

/* 主标题区域 */
.main-header {
  /* 与大屏顶部栏一致且更深的渐变与描边 */
  background: linear-gradient(180deg, rgba(5, 24, 37, 0.95) 0%, rgba(3, 14, 23, 0.95) 100%);
  border: 1px solid rgba(0, 201, 255, 0.25);
  box-shadow: 0 0 20px rgba(0, 201, 255, 0.08) inset;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 3px;
  /* 为顶部青色条留出空间 */
}

/* 标题容器 */
.title-container {
  position: relative;
  z-index: 5;
}

/* 完全去掉标题边框和背景 */
.title-border {
  position: relative;
  padding: 20px 40px;
  background: none;
  /* 去掉背景 */
  border: none;
  /* 去掉边框 */
  box-shadow: none;
  /* 去掉发光效果 */
}

/* 去掉复杂的伪元素边框效果 */
.title-border::before,
.title-border::after {
  display: none;
}

.page-title {
  color: #a6e7ff;
  text-shadow: 0 0 8px rgba(0, 201, 255, 0.3);
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* 日期时间显示 */
.datetime-display {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  color: #7dd3fc;
  /* 青色文字 */
  font-size: 16px;
  font-weight: 500;
  font-family: 'Courier New', monospace;
}

/* 主要内容区域 */
.main-content {
  padding: 16px 16px 20px 16px;
}

.table-container {
  /* 与大屏 panel 一致的面板风格 */
  background: linear-gradient(180deg, rgba(10, 42, 61, 0.9) 0%, rgba(7, 31, 47, 0.9) 100%);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(58, 160, 230, 0.35);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), 0 0 24px rgba(0, 201, 255, 0.04) inset;
  /* 让表头和数据区域在同一滚动容器内 */
  /* 头部110px + 外边距与内边距约60px，给底部留空10px */
  max-height: calc(100vh - 110px - 40px);
  overflow-y: auto;
  /* 隐藏滚动条（仍可滚动） */
  -ms-overflow-style: none;
  /* IE/Edge */
  scrollbar-width: none;
  /* Firefox */
}

.table-container::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* 表格头部 */
.table-header {
  display: grid;
  /* 列宽比例：更宽给名称/规格，数字列更窄 */
  grid-template-columns: 1.6fr 1.6fr 1.8fr 1.8fr 1.4fr 1.6fr 1.4fr 1fr 1fr 1fr 1fr;
  gap: 0;
  /* 加深并改为不透明，避免滚动时透底 */
  background: linear-gradient(180deg, rgba(5, 24, 37, 1) 0%, rgba(3, 14, 23, 1) 100%);
  border-bottom: 1px solid rgba(58, 160, 230, 0.3);
  position: sticky;
  top: 0;
  z-index: 2;
}

.header-cell {
  color: #b9ecff;
  font-weight: 600;
  font-size: 11px;
  padding: 7px 6px;
  line-height: 1.3;
  text-align: center;
  border-right: 1px solid rgba(58, 160, 230, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 33px;
  box-sizing: border-box;
  /* 单元格也设置背景，确保完全遮挡 */
  background: linear-gradient(180deg, rgba(5, 24, 37, 1) 0%, rgba(3, 14, 23, 1) 100%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-cell:last-child {
  border-right: none;
}

/* 表格内容区域 - 空白状态 */
.table-body {
  background: transparent;
  min-height: 300px;
}

/* 数据行区域 */
.table-rows {
  display: flex;
  flex-direction: column;
}

.table-row {
  display: grid;
  grid-template-columns: 1.6fr 1.6fr 1.8fr 1.8fr 1.4fr 1.6fr 1.4fr 1fr 1fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid rgba(58, 160, 230, 0.14);
}

.body-cell {
  color: #d7efff;
  font-size: 11px;
  padding: 6px 6px;
  line-height: 1.35;
  text-align: center;
  border-right: 1px solid rgba(58, 160, 230, 0.15);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.body-cell.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 让数值列表头与内容右对齐，纵向更整齐 */
.header-cell.numeric {
  text-align: right;
}

.table-row:hover .body-cell {
  background: rgba(0, 133, 204, 0.07);
}

.body-cell:last-child {
  border-right: none;
}

/* 轻微斑马纹增强可读性 */
.table-rows .table-row:nth-child(even) .body-cell {
  background: rgba(255, 255, 255, 0.012);
}

.empty-table {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.empty-message {
  color: rgba(186, 230, 253, 0.7);
  font-size: 16px;
  text-align: center;
}

/* 底部滚动指示器 */
.scroll-indicator {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 20px;
  opacity: 0.7;
}

.scroll-arrow {
  animation: bounce 2s infinite;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .table-container {
    overflow-x: auto;
  }
  
  .table-header {
    min-width: 1200px;
  }
}

@media (max-width: 768px) {
  .main-header {
    height: auto;
    padding: 20px;
    flex-direction: column;
    gap: 20px;
  }
  
  .main-content {
    padding: 20px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .datetime-display {
    position: static;
    transform: none;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 18px;
  }
  
  .title-border {
    padding: 15px 25px;
  }
  
  .datetime-display {
    font-size: 14px;
  }
}
</style>